﻿<template>
  <div>
      <h1>一个人的信息</h1>
      <h2>姓名: {{name}}</h2>
      <h2>年龄: {{age}}</h2>
      <h2>工作种类: {{job.type}}</h2>
      <h2>工作薪水: {{job.salary}}</h2>
      <hr />
      <input type="text" placeholder="姓名" v-model="username" /><br />
      <input type="text" placeholder="年龄" v-model="userage" /><br />
      <input type="text" placeholder="工作种类" v-model="userjob" /><br />
      <input type="text" placeholder="工作薪水" v-model="usersalary" /><br />
      <button @click="changeInfo(username,userage,userjob,usersalary)">修改个人信息</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
    name: 'App',
    setup(){
        let name = ref("我")
        let age = ref(21)
        let job = ref({
            type: '自由职业',
            salary: '1'
        })
        console.log(job.value)
        function changeInfo(username,userage,userjob,usersalary){
            name.value = username
            age.value = userage
            job.value.type = userjob
            job.value.salary = usersalary
            console.log(name,age)
        }
        return{
            name,age,changeInfo,job
        }
    }
}
</script>

<style>

</style>